﻿<!DOCTYPE html>
<html>
<head>
    <title>arcgis Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
		<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
    <script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
   
    <script type="text/javascript">
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
                maxExtent: mapExtent,
			    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
		            new OpenLayers.Control.Navigation(),
		            new OpenLayers.Control.LayerSwitcher(),
		            new OpenLayers.Control.PanZoomBar(),
		            new OpenLayers.Control.MousePosition()
				]
            });
			//arcgis
			//http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/${z}/${y}/${x}
            var baseLayer = new OpenLayers.Layer.GoogleTile('arcgis 彩色地图（含poi）',
				'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/${z}/${y}/${x}',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
            
			
			//arcgis
			//http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/${z}/${y}/${x}
			var Layer = new OpenLayers.Layer.GoogleTile('arcgis 彩色地图（无poi）',
				'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/${z}/${y}/${x}',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
			
			
			//冷色版
			//http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/${z}/${y}/${x}
			var Layer2 = new OpenLayers.Layer.GoogleTile('arcgis 冷色版（无poi）',
				'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/${z}/${y}/${x}',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
			
			
			//http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/${z}/${y}/${x}
			var Layer3 = new OpenLayers.Layer.GoogleTile('arcgis 暖色版（无poi）',
				'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/${z}/${y}/${x}',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
			
			
			//灰色
			//http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/${z}/${y}/${x}
			var Layer4 = new OpenLayers.Layer.GoogleTile('arcgis 灰色版（无poi）',
				'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/${z}/${y}/${x}',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
            });
			
			
            map.addLayers([baseLayer,Layer,Layer2,Layer3,Layer4]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条

			alert(map.getProjectionObject());
			
        }

 function lonlat2mercator(lonlat){
	var  mercator={x:0,y:0};
	var x = lonlat.x *20037508.34/180;
	var y = Math.log(Math.tan((90+lonlat.y)*Math.PI/360))/(Math.PI/180);
	y = y *20037508.34/180;
	mercator.x = x;
	mercator.y = y;
	return mercator ;
}
 
    </script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 600px">
    </div>
</body>
<script>
	$(document).ready(function(){
		var height=$(window).height()-40;
		$("#map").height(height);
	});
</script>
</html>
